
[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
[sdk-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-plugin-ospy?label=OSpy&color=white
[sdk-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-plugin-ospy

import Icon from '@ant-design/icons';
import Logo from '@/assets/image/o-spy.svg?react';
import workflow from '@/assets/image/screenshot/ospy-workflow.en.png';
import { Link } from 'react-router-dom';

<div align="center">
  <Icon component={Logo} style={{ fontSize: 100, color: '#fff' }} />
  <h1>O-Spy</h1>
  <h5>Offline recording, complete replay.</h5>
</div>

<div className='badges'>
  [![SDK version][sdk-ver-img]][sdk-ver-url]
  [![license][license-img]][license-url]
</div>

## What is O-Spy?#what-is-ospy

O-Spy (pronounced /əʊ spaɪ/, similar to **"Oh-Spy"**) is a lightweight web debugging tool focused on **offline recording** of program runtime data. No server deployment required, all data is stored locally, with full replay debugging support. [Click to see the demo](/o-spy?url=demo).

Core Features:

- 🚀 **Zero Deployment**: No server setup required, ready to use
- 📦 **Local Storage**: Data stays local, privacy protected
- 🎬 **Complete Replay**: Reproduce issues like watching a recording
- 🎨 **Customizable**: Themes and button styles configurable

Workflow:

<a href={workflow} target="_blank">
  <img src={workflow} style={{width: '100%'}} />
</a>

## Quick Start#quick-start

Just three steps to experience the power of O-Spy.

### Step 1: Import O-Spy#step-1

O-Spy is framework-agnostic and supports multiple import methods. Choose the one you prefer:

import { ImportGuide } from '@/pages/OSpy/components/ImportGuide';

<ImportGuide showConfig={false} />

Once successfully imported, a draggable "O-Spy" button will appear in the bottom right corner. Click and try it :)

import { CallOSpy } from '../md-components/CallOSPy';

<CallOSpy />

### Step 2: Generate and Export Data#step-2

To demonstrate the functionality, this page already has O-Spy integrated. Let's simulate some real-world scenarios and generate debugging data:

import { MakeData } from '../md-components/MakeData'

<MakeData />

After clicking the buttons above to generate some data, follow these steps to export:

1. Click the O-Spy floating button in the bottom right corner to open the panel
2. Click the **"Export Log"** button
3. The browser will automatically download a `.json` log file

> 💡 **Tip**: The exported JSON file contains all page runtime data, including console logs, network requests, page interactions, etc.

### Step 3: Replay and Debug#step-3

Now let's replay the exported data:

1. Go to the <Link to="/o-spy?url=" target='_blank'>replay page</Link>
2. Click the **"Select Log"** button in the top left corner
3. Select the JSON file you just exported
4. Start the replay and see the complete runtime process!

Congratulations! You've mastered the basics of O-Spy 🎉
